<template>
	<view class="contact-form">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="form-card">
			<view class="form-item">
				<text class="label">姓名</text>
				<view class="form-input">
					<input v-model="params.contact_name" type="text" class="value" placeholder="请输入" />
				</view>
			</view>
			<view class="form-item">
				<text class="label">联系电话</text>
				<view class="form-input">
					<input v-model="params.contact_phone" type="tel" maxlength="11" class="value" placeholder="请输入" />
				</view>
			</view>
		</view>

		<view class="action-bar">
			<view class="btn-wrap">
				<u-button class="btn" type="primary" size="large" @click="saveInfo">保存</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '我的联系方式',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		params: {
			type: 'agent',
			contact_name: '',
			contact_phone: '',
		}
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getContacts();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getContacts() {
		request.get('contacts/getContacts', {
			type: state.params.type
		}).then(res => {
			state.params = res.data;
		})
	}

	function saveInfo() {
		request.post('contacts/saveContacts', state.params).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				mask: true
			})
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		params
	} = toRefs(state);
</script>

<style lang="scss">
	.contact-form {
		padding: $m24;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.form-card {
			padding: 0 $m24;
			background-color: #fff;
			border-radius: $radius-16;

			.form-item {
				@include f-between($align: center);
				padding: $m32 0;
				border-bottom: 1rpx solid $border-color;

				&:last-child {
					border-bottom: 0;
				}

				.label {
					width: 148rpx;
				}

				.form-input {
					@include f-between($align: center);
					flex: 1;
				}
			}
		}

		.action-bar {
			margin-top: 24rpx;

			.btn-wrap {
				.btn {}
			}
		}
	}
</style>